<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户信息</span>
      </div>
    </template>
    <div class="card-body">
      <div class="card-info">
        <div class="label">用户名</div>
        <div class="content">{{ user.userInfo.account }}</div>
        <div class="label">账户额度</div>
        <div class="content">{{ user.userInfo.xhs_ads_power_user_number }}</div>
      </div>
      <div class="card-info">
        <div class="label">到期时间</div>
        <div class="content">{{ user.userInfo.xhs_ads_power_expire_time }}</div>
      </div>
      <div class="card-info">
        <div class="label">操作</div>
        <div class="content">
          <el-button type="primary" @click="login = true">修改密码</el-button>
          <el-button @click="logout = true" type="danger"
            >退出登录</el-button
          >
        </div>
      </div>
    </div>

    <el-dialog v-model="logout" title="提示">
      确定退出登录吗?
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="logout = false">取消</el-button>
          <el-button type="primary" @click="handleLogout"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="login"
      title="修改密码"
      width="500"
      center
      @close="resetForm"
    >
      <el-form
        :inline="true"
        :model="modelForm"
        ref="modelFormRef"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="新密码" class="model-item" prop="new_password">
          <el-input
            v-model="modelForm.new_password"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item
          label="确认密码"
          class="model-item"
          prop="confirmPassword"
        >
          <el-input
            v-model="modelForm.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="login = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script setup>
import { ref, reactive } from "vue";
import { userStore } from "@/store/user";
import { update_password } from "@/api/login";
import router from "@/router";
import { ElMessage } from "element-plus";
const logout = ref(false);
const login = ref(false);
const user = userStore();
const modelForm = reactive({
  new_password: "",
  confirmPassword: "",
});

const rules = reactive({
  new_password: [
    { required: true, message: "新密码不能为空", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== modelForm.new_password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});
const resetForm = () => {
  if (modelFormRef.value) {
    modelFormRef.value.resetFields();
  }
  Object.assign(modelForm, {
    new_password: "",
    confirmPassword: "",
  });
};
const modelFormRef = ref(null);
const handleLogout = () => {
  user.clearUserInfo();
  router.push("/");
};
const handleSubmit = () => {
  modelFormRef.value.validate(async (valid) => {
    if (valid) {
      // 校验通过，执行提交逻辑
      console.log("表单校验通过", modelForm);
      try {
        const res = await update_password({
          new_password: modelForm.new_password,
        });
        if (res.code === 0) {
          login.value = false;
          user.clearUserInfo();
        } else {
          ElMessage.error(res.msg);
        }
      } catch (error) {
        console.log("error", error);
      }
      // 这里可以调用 API 提交数据
    } else {
      console.log("表单校验失败");
    }
  });
};
</script>
<style scoped lang="scss">
.box-card {
  width: 650px;
  .card-body {
    border: 1px solid #c8c3c3;
    .card-info {
      border: 1px solid #c8c3c3;
      height: 50px;
      display: flex;
      .label {
        width: 100px;
        height: 100%;
        line-height: 50px;
        padding-left: 20px;
        background: #d5d4d4e0;
      }
      .content {
        flex: 1;
        height: 100%;
        line-height: 50px;
        padding-left: 10px;
      }
    }
  }
}

.model-item {
  width: 90%;
}
.modalBtns {
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>
